<template>
<div class="sdy-search">
    <SdyHander title="啥都有" back>
         
          <template #right>
            <van-button  @click="searchHandler" type="success" size="small">搜索</van-button>
          </template>


          <template #title>
               <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键词" /></template>
     </SdyHander>
    <!-- 搜索相关的内容显示 -->
    <!--如果 searchText没有文本的时候显示 -->
     <!-- <SdySearchHistory v-if="!searchText"></SdySearchHistory> -->
     <!-- 如果 searchText有文本的时候显示 -->
    <!--  <SdySearchList v-else></SdySearchList> -->
            <component :is="searchText ? SdySearchList:SdySearchHistory "></component>

</div>
</template> 
<script setup lang="ts">
import SdySearchHistory from "./components/SdySeachHistory.vue";
import SdySearchList from  "./components/SdySeachList.vue";
import { ref,watch,provide} from "vue";
import { useRouter,type Router } from "vue-router";
  
//导入相关的api请求接口
import {searchListApi } from '@/api/goods';

//导入相关的 ts 接口
import type { MyHotItem } from "@/config/interface";


 const $router:Router = useRouter()
 
  
  
  
  //准备一个数据，和文本框交互
const  searchText = ref<string>('')

//准备一个点击搜素的方法
const searchHandler = () =>{
  const  text = searchText.value.trim()
  //非空验证
  if(!text) return 
  $router.push({
    path:'/list',
    query:{search:text}
  })
}
// 随着搜索的关键字变化实时请求最新的相关数据展示
// 准备一个数据, 表示搜索列表
const searchList = ref<MyHotItem[]>([])
//随着搜素的关键字变化实时请求最新的相关数据展示
//利用watch 监控 searchText
watch(searchText, async () => {
  if (!searchText.value.trim()) return

  const res = await searchListApi(searchText.value.trim())
  console.log(res)
  searchList.value = res.data
})
provide('searchList', searchList)
</script>
<style coped lang="scss">
.van-search{
    height: 46px;
}
</style>